<template>
    <div class="events-details">
        <nav-header>
            <template slot="menuBefore">
                <li>
                    <router-link to="/life/events/events-management" tag="a"
                        >赛事管理</router-link
                    >
                </li>
                <li class="gap">&gt;</li>
                <span>{{ infoDetail.name }}</span>
            </template>
        </nav-header>
        <section class="details-container">
            <div class="common-title">
                <img
                    class="tit-icon"
                    src="../../../../static/image/life/events/base-info.png"
                    alt="icon"
                />
                <i class="tit-name">基本信息</i>
            </div>
            <div class="details-info">
                <ul>
                    <li>
                        <span class="title-name">赛事主题：</span>
                        <span>{{ infoDetail.name }}</span>
                    </li>
                    <li>
                        <span class="title-name">赛事封面：</span>
                        <img
                            class="poster-img"
                            :src="BASE_URL + infoDetail.picture"
                            alt="封面"
                            :onerror="errorImg"
                        />
                    </li>

                    <li>
                        <span class="title-name">赛事类型：</span>
                        <span>{{
                            infoDetail.level_type == 1
                                ? "校级活动"
                                : infoDetail.level_type == 2
                                ? "年级活动"
                                : "班级活动"
                        }}</span>
                    </li>
                    <li v-if="infoDetail.level_type != 1">
                        <span class="title-name">活动范围：</span>
                        <span>{{ infoDetail.all_org_name }}</span>
                    </li>
                    <li>
                        <span class="title-name">赛事对象：</span>
                        <span>
                            <i
                                v-for="(item, index) of infoDetail.role_info"
                                :key="index"
                                >{{ item.name }}&nbsp;</i
                            >
                        </span>
                    </li>
                    <li>
                        <span class="title-name">赛事时间：</span>
                        <span
                            >{{ infoDetail.start_time }} -
                            {{ infoDetail.end_time }}</span
                        >
                    </li>

                    <li>
                        <span class="title-name">赛事地点：</span>
                        <span>{{ infoDetail.place }}</span>
                    </li>
                    <li>
                        <span class="title-name">赛事组织方：</span>
                        <span>{{ infoDetail.organizer }}</span>
                    </li>
                    <li>
                        <span class="title-name">赛事联系人：</span>
                        <span>{{ infoDetail.responsibler }}</span>
                    </li>
                    <li>
                        <span class="title-name">联系方式：</span>
                        <span>手机 {{ infoDetail.telephone }}</span>
                    </li>
                    <li>
                        <span class="title-name">在线报名：</span>
                        <span>
                            <i class="right-area">{{
                                infoDetail.online == "0" ? "否" : "是"
                            }}</i>
                            <el-button
                                type="text"
                                v-if="infoDetail.online == '1'"
                                @click="checkRegistration(infoDetail.id)"
                                >查看名单</el-button
                            >
                        </span>
                    </li>
                    <template v-if="infoDetail.online == '1'">
                        <li>
                            <span class="title-name">报名起止时间：</span>
                            <span
                                >{{ infoDetail.registration_starttime }} -
                                {{ infoDetail.registration_endtime }}</span
                            >
                        </li>
                        <li>
                            <span class="title-name">报名信息设置：</span>
                            <div class="project-info">
                                <template>
                                    <el-tabs v-model="tabActive" type="card">
                                        <el-tab-pane
                                            v-for="(item,
                                            index) of infoDetail.project"
                                            :key="index"
                                            :label="'项目' + item.id"
                                            :name="item.id"
                                        >
                                            <ul>
                                                <li>
                                                    <span class="title-name"
                                                        >项目名称：</span
                                                    >
                                                    <span>{{ item.name }}</span>
                                                </li>
                                                <li>
                                                    <span class="title-name"
                                                        >项目名额：</span
                                                    >
                                                    <span>{{
                                                        item.quota
                                                    }}</span>
                                                </li>
                                            </ul>
                                        </el-tab-pane>
                                    </el-tabs>
                                </template>
                            </div>
                        </li>
                    </template>
                </ul>
            </div>
            <div class="common-title">
                <img
                    class="tit-icon"
                    src="../../../../static/image/life/events/info-icon.png"
                    alt="icon"
                />
                <i class="tit-name">赛事内容</i>
            </div>
            <template>
                <div class="no-profile" v-if="infoDetail.profile == ''">
                    <p>暂无内容</p>
                </div>
                <div
                    v-else
                    class="activity-information"
                    v-html="infoDetail.profile"
                ></div>
            </template>
            <div class="common-title">
                <img
                    class="tit-icon"
                    src="../../../../static/image/life/events/competition.png"
                    alt="icon"
                />
                <i class="tit-name">赛事成绩</i>
            </div>
            <div class="competition-results">
                <div class="competition">
                    <template v-if="isShowBtn">
                        <uploader
                            class="uploader-example"
                            ref="uploader"
                            :options="uploadOptions"
                            :file-status-text="statusText"
                            @file-success="fileSuccess"
                            @file-error="fileFail"
                        >
                            <uploader-unsupport></uploader-unsupport>
                            <uploader-drop>
                                <uploader-btn>上传成绩</uploader-btn>
                                <span class="tips"
                                    >（注意：最多可以上传10个文件）</span
                                >
                            </uploader-drop>
                            <uploader-list></uploader-list>
                        </uploader>
                    </template>
                    <ul>
                        <li
                            class="entry-file-list clear"
                            v-for="(item, index) in resultData"
                            :key="index"
                        >
                            <div class="competition-info fl">
                                <img
                                    v-if="item.file_type == 1"
                                    src="../../../../static/format/resourceicon1.png"
                                    alt="文档"
                                />
                                <img
                                    v-else-if="item.file_type == 2"
                                    src="../../../../static/format/resourceicon2.png"
                                    alt="日志"
                                />
                                <img
                                    v-else-if="item.file_type == 3"
                                    src="../../../../static/format/resourceicon3.png"
                                    alt="图片"
                                />
                                <img
                                    v-else-if="item.file_type == 4"
                                    src="../../../../static/format/resourceicon4.png"
                                    alt="压缩文件"
                                />
                                <img
                                    v-else-if="item.file_type == 5"
                                    src="../../../../static/format/resourceicon5.png"
                                    alt="音乐"
                                />
                                <img
                                    v-else-if="item.file_type == 6"
                                    src="../../../../static/format/resourceicon6.png"
                                    alt="视频"
                                />
                                <img
                                    v-else-if="item.file_type == 7"
                                    src="../../../../static/format/resourceicon7.png"
                                    alt="应用程序"
                                />
                                <img
                                    v-else-if="item.file_type == 8"
                                    src="../../../../static/format/resourceicon8.png"
                                    alt="其他"
                                />
                                <span
                                    class="fileName"
                                    :title="item.name + '.' + item.postfix"
                                    >{{ item.name }}</span
                                >
                            </div>
                            <div class="tool-btns fr">
                                <el-button
                                    type="primary"
                                    class="downLoad-btn"
                                    @click="down(item)"
                                    >下载</el-button
                                >
                                <el-button
                                    type="danger"
                                    class="del-btn"
                                    @click="delResult(item.id)"
                                    >删除</el-button
                                >
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userId: this.$g.user_id,
            infoDetail: {},
            errorImg:
                'this.src="' +
                require("../../../../static/image/life/events/bg-img.png") +
                '"',
            tabActive: "1",

            uploadOptions: {
                target: this.BASE_URL + "/api/competition/vue_demo_upload",
                testChunks: false,
                headers: { Authorization: `Bearer ` + this.$g.access_token }
            },
            statusText: {
                success: "上传成功",
                error: "上传出错",
                uploading: "正在上传...",
                paused: "暂停",
                waiting: "等待上传"
            },
            resultData: [] //赛事成绩数据
        };
    },
    created() {
        this.getDetail();
        this.getResult();
    },
    mounted() {},
    computed: {
        isShowBtn() {
            if (this.resultData.length < 10) {
                return true;
            } else {
                return false;
            }
        }
    },
    methods: {
        /**
         * 获取赛事详情
         */
        getDetail() {
            let success = res => {
                this.infoDetail = res.data;
            };
            const params = {
                id: this.$route.params.id
            };
            this.$ajax.get("api/competition/match", {
                params,
                func: { success: success }
            });
        },
        /**
         * 查看名单
         */
        checkRegistration(id) {
            this.$router.push("/life/events/events-registration/" + id);
        },
        /**
         * 获取赛事成绩
         */
        getResult() {
            let success = res => {
                this.resultData = res.data;
            };
            const params = {
                competition_id: this.$route.params.id
            };
            this.$ajax.get("api/competition/match_file", {
                params,
                func: { success: success }
            });
        },
        //上传成功的事件
        fileSuccess(rootFile, file, message, chunk) {
            var mess = eval("(" + message + ")");
            mess = handleResponseData(mess);
            let success = res => {
                this.$refs.uploader.uploader.removeFile(file); //上传文件列表隐藏
                this.$message.success(res.msg);
                this.getResult();
            };
            var params = {
                id: this.$route.params.id,
                name: mess.data.file_name,
                path: mess.data.file_path,
                file_type: mess.data.file_type,
                create_id: this.$g.user_id
            };
            this.$ajax.post("api/competition/match_file", params, {
                func: { success: success }
            });
        },
        fileFail(rootFile, file, message, chunk) {
            var mess = eval("(" + message + ")");
            if (parseInt(mess.error) === 401 && this.uploadRetryTimes > 0) {
                let callbcak = data => {
                    this.uploadRetryTimes--;
                    this.$refs.uploader.uploader.retry(file);
                };
                this.get_access_token(callbcak);
            } else {
                this.$message.error(mess.msg);
            }
        },
        /**
         * 下载成绩文件
         */
        down(obj) {
            var form = document.createElement("form");
            var type = 1;
            form.action = this.BASE_URL + "/index/resource/match_file_download";
            form.method = "post";
            form.style.display = "none";
            var opt_id = document.createElement("textarea");
            opt_id.name = "id";
            opt_id.value = obj.id;
            form.appendChild(opt_id);
            var opt_type = document.createElement("textarea");
            opt_type.name = "type";
            opt_type.value = type;
            form.appendChild(opt_type);
            document.body.appendChild(form);
            form.submit();
            document.body.removeChild(form);
        },
        /**
         * 删除成绩文件
         * @param {Number} id 记录 id
         */
        delResult(id) {
            let yes = res => {
                this.sureDel(id);
            };
            let cancel = res => {};
            this.e_confirm({
                yes: yes,
                cancel: cancel,
                txt: "确定要删除该成绩吗？删除将不可恢复"
            });
        },
        /**
         * 删除数据
         * @param {String} id 删除的 id
         */
        sureDel(id) {
            let success = res => {
                this.$message.success(res.msg);
                this.getResult();
            };
            let fail = res => {
                this.$message.error(res.msg);
                this.getResult();
            };

            this.$ajax.delete("api/competition/match_file", {
                params: { id },
                func: { success: success, fail: fail }
            });
        }
    }
};
</script>
<style lang="scss">
.events-details {
    .common-title {
        height: 36px;
        line-height: 36px;
        background-color: #f0f8ff;
        .tit-icon {
            padding: 0 15px 0 20px;
        }
        .tit-icon,
        .tit-name {
            vertical-align: middle;
            font-style: normal;
        }
    }
    .details-info {
        padding: 32px 0 10px;
        i {
            font-style: normal;
        }
        li {
            padding: 10px 0;
        }
        .title-name {
            display: inline-block;
            width: 130px;
            font-size: 14px;
            color: #666;
            vertical-align: top;
        }
        .poster-img {
            display: inline-block;
            width: 390px;
            height: 180px;
        }

        .right-area {
            margin-right: 20px;
        }
    }
    .activity-information {
        padding: 30px 0;
    }
    .project-info {
        padding: 20px 0 0;
        .el-tabs__item {
            height: 30px;
            line-height: 30px;
        }
    }
    .competition-results {
        padding-top: 20px;
        .uploader-example {
            padding: 10px 0 20px;
        }
        .uploader-example .uploader-btn {
            padding: 8px 40px;
            margin-right: 15px;
            color: #fff;
            background: #338efc;
            border: 1px solid transparent;
        }
        .uploader-drop {
            border: 1px dashed transparent;
            background-color: transparent;
            .tips {
                font-size: 12px;
                color: #666;
            }
        }
        .uploader-example .uploader-btn:hover {
            background: rgba(51, 142, 252, 0.8);
        }
        .entry-file-list {
            padding: 10px 0;
        }
        .competition-info {
            .fileName {
                font-size: 16px;
            }
            img,
            span {
                vertical-align: middle;
                padding: 0 10px;
            }
        }
        .tool-btns {
            .el-button {
                padding: 0;
                width: 80px;
                height: 36px;
            }
        }
    }
    .no-profile p {
        padding: 40px 0;
        text-align: center;
        color: #666;
    }
}
</style>